<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<link href="layui/css/layui.css" rel="stylesheet">
<script src="/layui/layui.js"></script>

<body>
<div id="addContent" style=" height: 100%; height: 100%; text-align: center;">
  <!--form表单 lay-filter 绑定事件 若有多个form 筛选作用-->
  <form id="addform" lay-filter="addform"
        class="layui-form layui-form-pane"
        style="margin: 30px auto; display: inline-block;">
    <div class="layui-form-item" style="text-align: center;">
      <!--标签-->
      <label class="layui-form-label">书本Id</label>
      <div class="layui-input-inline">
        <!--输入框  lay-verify =“required” 必填-->
        <input type="text" name="bookId" lay-verify="required"
               autocomplete="off" placeholder="请输入书本ID" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
      <label class="layui-form-label">书本名称</label>
      <div class="layui-input-inline">
        <input type="text" name="bookName" lay-verify="required"
               autocomplete="off" placeholder="请输入书本名称:" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
      <label class="layui-form-label">书本价格：</label>
      <div class="layui-input-inline">
        <input type="number" name="bookPrice" lay-verify="required"
               autocomplete="off" placeholder="请输入书本价格:" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
      <label class="layui-form-label">书本描述信息：</label>
      <div class="layui-input-block">
        <textarea placeholder="请输入书本描述信息" class="layui-textarea" name="bookDesc"></textarea>
      </div>
    </div>
    <div style="position: absolute; bottom: 0px; left: 45%;">
      <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
      <button class="layui-btn" lay-submit="" lay-filter="addsubmit">
        <i class="layui-icon">&#x1005;</i>添加
      </button>
      <button class="layui-btn layui-bg-red cancel" type="button">
        <i class="layui-icon">&#x1006;</i>取消
      </button>
    </div>
  </form>
</div>

<script type="text/javascript">

  layui.use('form', function (){
    var form = layui.form;
    var $ = layui.jquery;
    form.on('submit(addsubmit)', function(data) {
      $.ajax({
        url: '/insertBooks',
        type: 'post',
        data: data.field,
        success:function () {
          //假设这是iframe页
          var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
          parent.layer.close(index); //再执行关闭
          layer.close(form);
        }
      });
    });
  });
</script>
</body>
</html>